<template>
	<view>
		<!-- 搜索栏 -->
		<view class="search-block-father">
			<view class="search-block" style="width: 696rpx;">
				<image class="icon1" src="../../static/search.png" mode="heightFix"></image>
				<input class="search-text"
				type="text"
				 v-model="search"
				 confirm-type="search"
				 @confirm="getSearch"
				 placeholder="| 搜职位"
				 placeholder-style="font-size:25rpx;color:#bfbfbf"
				 />
			 </view>
		 </view>
		 <scroll-view scroll-y>
		<!-- 轮播图 --> 
		 <view class="swiper">
			 <swiper  autoplay=" true" interval="3000" circular="true">
				 <swiper-item v-for="(item,index) in swipers" :key="index">
					 <image class="lunbo" :src="item"></image>
				 </swiper-item>
			 </swiper>
		 </view>
		<!--选项卡 城市返回123-->
		<view class="tab">
			 <view class="tab1">
<!-- 				 <view :class="listIndex ==y?'activite':''" @click="checkListIndex(y)"v-for="(x,y) in navList" :key="y" >
				 {{x}}
				 </view> -->
				 <view :class="navIndex==1?'activite':''" @click="checkIndex(1)" style="margin-left: 10rpx;">全部</view>
				 <view :class="navIndex==2?'activite':''" @click="checkIndex(2)">校招</view>
				 <view :class="navIndex==3?'activite':''" @click="checkIndex(3)">实习</view>
				 <view :class="navIndex==4?'activite':''" @click="checkIndex(4)">宣讲会</view>
			 </view>			 
<!-- 			 <view class="tab2">
				<view class="text">行业</view>
				<view class="text">城市</view> 
			</view> -->
<!-- 			<view class="uni-form-item uni-column text">
				<picker @change="bindPickerChange" :range="arrayHang">	
					<label class="">{{arrayHang[hangid]}}</label>		
				</picker>
			</view> -->
			<view class="uni-form-item uni-column text" style="margin-right:-90rpx;width: 100rpx;">
				<picker class="picker" @change="bindPickerChange2" :range="array2">	
					<!-- <label>城市：</label> -->
					<label class="">{{array2[index2]}}</label>	
					<image class="xialaimage2" src="../../static/xiala.png" style="margin-top: 16rpx;left:6rpx;margin-right:24rpx;width:18rpx;height:18rpx;"></image>
				</picker>
			</view> 
			
			<view class="uni-form-item uni-column text" style="margin-right:0rpx;width: 100rpx;">
				<picker class="picker" @change="bindPickerChange" :range="array">	
					<!-- <label>城市：</label> -->
					<label class="">{{array[index]}}</label>	
					<image class="xialaimage" src="../../static/xiala.png" style="margin-top: 16rpx;left:6rpx;margin-right:24rpx;width:18rpx;height:18rpx;"></image>
				</picker>
				
			</view>
			


		</view>
		<!-- 内容 get返回workId   post，add/+tagID-->
		<view class="content" v-if="navIndex==1">
		      <view v-for="(item,index) in allList" :key="index" @click="toDetails(navIndex,index)">
				<card :reciveAllzhao="item" ></card>
		      </view>
		</view>
		<view class="content" v-if="navIndex==2">
		      <view v-for="(item,index) in xiaoList" :key="index" @click="toDetails(navIndex,index)">
					<card :reciveAllzhao="item" ></card>
		      </view>
		</view>
		<view class="content" v-if="navIndex==3">
		      <view v-for="(item,index) in internshipsList" :key="index" @click="toDetails(navIndex,index)">
		      		<card :reciveAllzhao="item" ></card>
		      </view>
		</view>
		<view class="content" v-if="navIndex==4">
		      <view v-for="(item,index) in fairList" :key="index">
		      		<cardFair :reciveAllzhao="item" ></cardFair>
		      </view>
		</view>

	</scroll-view>
	</view>
</template>

<script>
	import card from"../../components/card.vue"
	import cardFair from"../../components/cardFair.vue"
	export default {
		components:{
			card,
			cardFair,
		},
		data() {
			return {
				search:"",
				swipers:[],
				navList:["全部","校招","实习","宣讲会"],
				listIndex:0,
				navIndex:1,
				allList:[],
				xiaoList:[],
				internshipsList:[],
				fairList:[],
				id:0,
				array:['城市','北京','西安','南京','上海','武汉','深圳','广州','成都',
				'重庆','杭州','天津'],
				array2:['行业','前端','后端','算法','测试','运维','产品','其他'],
				index:0,
				index2:0
/* 				arrayHang:['城市','北京','西安','南京','上海','武汉','深圳','广州','成都',
				'重庆','杭州','天津'],
				hangid:0, */
			}
		},
		onShow() {//加载就会改变，重复刷新

			uni.request({
				url:"https://hotenergy.club/workapp/work/get_all",
				method:"GET",
				data:"",
				success:(res)=>{
					console.log('all',res.data);
					this.allList=res.data;
				},
			}),
			uni.request({
				url:"https://hotenergy.club/workapp/work/get_works",
				method:"GET",
				data:"",
				success:(res)=>{
					//console.log(res.data);
					this.xiaoList=res.data;
				},
			}),
			uni.request({
				url:"https://hotenergy.club/workapp/work/get_internships",
				method:"GET",
				data:"",
				success:(res)=>{
					//console.log(res.data);
					this.internshipsList=res.data;
				},
			}),
			uni.request({
				url:"https://hotenergy.club/workapp/fair/get_all",
				method:"GET",
				data:"",
				success:(res)=>{
					//console.log(res.data);
					this.fairList=res.data;
				},
			})

		},
		onLoad() {//只更新一次，request请求来的
			this.swipers=[
			// '../../static/swip.jpg',
			// '../../static/swip1.jpg',
			'https://workapp.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20210531020310.jpg',
			// 'https://workapp.oss-cn-beijing.aliyuncs.com/lunbo1.jpg',
			'https://workapp.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20210531020320.jpg'
			// 'https://workapp.oss-cn-beijing.aliyuncs.com/lunbo2.jpg',
			// 'https://workapp.oss-cn-beijing.aliyuncs.com/lunbo3.jpg'
			];
			
		},
		methods: {
			//下拉框
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e)//改变的事件名
				//console.log('picker发送选择改变，携带值为', e.target.value)   用于输出改变索引值
				this.index = e.target.value			//将数组改变索引赋给定义的index变量
				this.jg=this.array[this.index]		//将array【改变索引】的值赋给定义的jg变量
			//	console.log("籍贯为：",this.jg)		//输出获取的籍贯值，例如：中国
			    uni.request({
			    	url:'https://hotenergy.club/workapp/city/get_work/'+this.index,
					method:'GET',
					success: (res) => {
						console.log('城市筛选',res)
						this.allList=res.data;
						this.navIndex=1;
					}
					
			    })
			},
			
			bindPickerChange2: function(e) {
				console.log('picker发送选择改变，携带值为', e)//改变的事件名
				//console.log('picker发送选择改变，携带值为', e.target.value)   用于输出改变索引值
				this.index2 = e.target.value			//将数组改变索引赋给定义的index变量
				this.jg2=this.array2[this.index]		//将array【改变索引】的值赋给定义的jg变量
			//	console.log("籍贯为：",this.jg)		//输出获取的籍贯值，例如：中国
			    uni.request({
			    	url:'https://hotenergy.club/workapp/work/get_by_industry/'+this.index2,
					method:'GET',
					success: (res) => {
						console.log('行业筛选',res)
						this.allList=res.data;
						this.navIndex=1;
					}
				
			    })
			},
			
			  onClickNav({ detail = {} }) {
			    this.setData({
			      mainActiveIndex: detail.index || 0
			    });
			  },
			
			  onClickItem({ detail = {} }) {
			    const activeId = this.data.activeId === detail.id ? null : detail.id;
			
			    this.setData({ activeId });
			  },
			checkIndex(index){//tab全部实习校招
				this.navIndex=index;
			},
			checkListIndex(index){
				this.listIndex=index;
			},
			toDetails(navIndex,index){//转到详情页
				console.log('index,navIndex',index,navIndex),
				this.id=index+1;
				//console.log(this.id),
				uni.navigateTo({
					url:'neirong?&id='+this.id+'&navIndex='+navIndex+'&index='+index,
				})
			},
			getSearch(){
				console.log(this.search)
				uni.request({
					url:'https://hotenergy.club/workapp/search_work',
					method:"POST",
					data:{
						searchStr:this.search
					},
					success: (res) => {
						console.log('search',res)
						this.allList=res.data;
						this.navIndex=1;
						if(this.allList==''){
							uni.showToast({
								icon:'loading',
								title:'没有该内容'
							})
						}
					}
				})
        }			
			}
		
	}
</script>

<style>
page{
		background-color: #F5F5F5;
}
.search-block{
	position:relative;//定位方式,相对定位
/* 	margin:25rpx 20rpx 20rpx 20rpx;//上右下左 */
	display: flex;//flex容器
	flex-direction: row;//元素按列排
	background-color: #FFFFFF;
	border-radius: 40rpx;  /*15rpx*/
	height: 60rpx;
}
.search-block-father{
	position:relative;//定位方式,相对定位
	margin:0;//上右下左
	padding: 25rpx 27rpx 20rpx 27rpx;;
	display: flex;//flex容器
	flex-direction: row;//元素按列排
	background-color: #666FFC;
	height: 60rpx;
}
.search-text{
	margin-top: 8rpx;
	font-size: 30rpx;
}
.icon1{
	height: 45rpx;
	margin-top: 7rpx;
	margin-left: 10rpx;
	margin-right: 10rpx;
}
.swiper{
	position:relative;//定位方式,相对定位
	margin: 15rpx 25rpx 25rpx 25rpx;
	border-radius: 25rpx;
	border: 1px solid #e6e6e6;
	height: 200rpx;
}
.swiper image{
	border-radius: 25rpx;
	width: 100%;
	height: 200rpx;
}
.tab{
	position:relative;//定位方式,相对定位
	margin: 5rpx 20rpx 20rpx 20rpx;//上右下左
	display: flex;//flex容器
	flex-direction: row;//元素按hang排
	justify-content: space-between;
}
.tab1{
	width:60%;
	color: #999999;
	display: flex;//flex容器
	flex-direction: row;//元素按hang排
	justify-content: space-between;
}
.activite{
	font-weight: bold;
	color: #666FFC;
}
.text{
	font-size: small;
	line-height: 23px;
	margin-right: 30rpx;
}
/* .content{
	background-color:#f4f4f4;
} */
.xialaimage{
	position: relative;
	/* top: -20px; */
	left: -20rpx;
	/* bottom: -20px; */
	/* right: 20px; */
	height: 15rpx;
	width: 15rpx;
}
.xialaimage2{
	position: relative;
	/* top: -20px; */
	left: -20rpx;
	/* bottom: -20px; */
	/* right: 20px; */
	height: 15rpx;
	width: 15rpx;
}
</style>
